<script>
export default {
  data() {
    return {
      dir: 'left',
      enterClass: '',
      leaveClass: ''
    }
  },

  methods: {
    changeTab(dir) {
      this.dir = dir
      this.$router.push({
        path: `/home/category/${ dir === 'left' ? 'cate' : 'material' }`
      })
    }
  },

  watch: {
    $route(to, from) {
      if (to.meta > from.meta) {
        this.enterClass = 'slideInRight'
        this.leaveClass = 'slideOutLeft'
      } else {
        this.enterClass = 'slideInLeft'
        this.leaveClass = 'slideOutRight'
      }
    }
  }
}
</script>

<template>
  <div class="nav-container">
    <div>
      <header>
        <div class="track">
          <div class="category" :class="{active: dir === 'left'}" @click="changeTab('left')">分类</div>
          <div class="material" :class="{active: dir === 'right'}" @click="changeTab('right')">食材</div>
          <div class="slider" :class="{slide: dir === 'right'}"></div>
        </div>
      </header>
    </div>
    <div class="cate-main">
      <!-- <keep-alive exclude="category"> -->
        <transition
          :enter-active-class="`animate__animated animate__${enterClass} animate__faster`"
          :leave-active-class="`animate__animated animate__${leaveClass} animate__faster`"
        >
          <router-view></router-view>
        </transition>
      <!-- </keep-alive> -->
    </div>
  </div>
</template>

<style lang="scss">
.nav-container {
  header {
    display: flex;
    align-items: center;
    justify-content: center;
    .category, .material {
      position: relative;
      flex: 1;
      line-height: .3rem;
      font-size: .16rem;
      z-index: 1;
      color: #fff;
      &.active {
        color: #ee7530;
      }
    }
    .track {
      display: flex;
      position: relative;
      width: 1.4rem;
      height: .3rem;
      border: 1px solid #fff;
      border-radius: .15rem;
      color: #ee7530;
    }
    .slider {
      position: absolute;
      left: 0;
      background-color: #fff;
      height: .3rem;
      width: .7rem;
      border-radius: .15rem;
      color: #ee7530;
      line-height: .3rem;
      font-size: .16rem;
      z-index: 0;
      transition: all 100ms;
      &.slide {
        left: .7rem;
      }
    }
  }

  .cate-main {
    position: relative;
  }
}
</style>
